<template>
  <view class="pay-button">
    <button v-if="isPay" class="pay-btn" :loading="loading" :disabled="loading || disabled" @click="emits('payClick')">
      <text style="font-size: 16px">{{ buttonText }}</text>
      <view class="highlight"></view>
    </button>
    <button v-else class="pay-btn" :disabled="true">
      <text style="font-size: 16px">{{ notPayText }}</text>
    </button>
  </view>
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'pay-btn',
  });
  defineProps({
    /** 加载中 */
    loading: { type: Boolean, required: true },
    /** 是否禁用 */
    disabled: { type: Boolean, required: true },
    /** 按钮名称 */
    buttonText: { type: String, default: '立即充值' },
    /** 是否可以支付 */
    isPay: { type: Boolean, default: true },
    /** 不可以支付时的提示文本 */
    notPayText: { type: String, default: '苹果系统暂不支持支付' },
  });

  const emits = defineEmits<{
    (e: 'payClick'): void;
  }>();
</script>

<style lang="scss" scoped>
  .pay-button {
    flex: 1;
    width: 100%;
  }

  .tt-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pay-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin-bottom: 0;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(90deg, #fdbf00, #fe580c);
    border-radius: 40px;

    &:after {
      border: none;
      border-color: transparent;
    }

    .highlight {
      position: absolute;
      top: 0;
      left: -200%;
      width: 80px;
      height: 100%;
      background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent); /* 白色高光的渐变背景 */
      transform: skewX(-45deg);
      animation: button-highlight 2s linear infinite; /* 应用动画 */
    }
  }

  @keyframes button-highlight {
    0% {
      left: -200%; /* 初始位置在左侧外部 */
    }

    100% {
      left: 100%; /* 结束位置在右侧外部 */
    }
  }
</style>
